<template>
	<view>
		<view class="body after-navber">
		    <!-- parse <include src="/components/goods/goods_send.wxml"></include> -->
		    <view class="status-bar">
		        <image src="/static/images/1DypCvLtKFAo2ZnG.png"></image>
		        <view>
		           <view v-if="order.refund_status == 0">
		           	<block v-if="order.refund_type == 1">
		           		<block v-if="order.is_agree == 0">等待处理</block>
		           		<block v-else>
		           			<block v-if="order.is_user_send == 0">待买家发货</block>
		           			<block v-else>等卖家待处理</block>
		           		</block>
		           	</block>
		          
		           </view>
		           <view  v-if="order.refund_status == 1">已同意并退款</view>
		           <view  v-if="order.refund_status == 2">已同意换货</view>
		           <block v-if="order.refund_status == 3">
		           	<view  v-if="order.refund_type == 1">已拒绝退货退款</view>
		           	<view  v-if="order.refund_type == 2">已拒绝换货</view>
		           </block>
					 <view v-if="order.refund_status == 4">等卖家待处理</view>
		        </view>
		    </view>
		    <view
		        style="padding-left: 24rpx; margin-bottom: 20rpx; background: #fff"
		        v-if="(order.refund_type == 2 || order.refund_type == 3 ) && order.is_user_send != 1 && order.refund_status == 4"
		    >
		        <text style="font-size: 10pt; color: #999999">收件人信息</text>
		        <view class="flex-row flex-y-center">
		            <view class="flex-col flex-grow-1">
		                <view class="flex-row address-info">
		                    <view>{{ order.store.re_name }}</view>
		                    <view>{{ order.store.re_mobile }}</view>
		                </view>
		                <view style="margin-right: 40rpx">{{ order.store.re_address }}</view>
		            </view>
		            <view class="flex-grow-0 flex-x-center flex-y-center copy-fz">
		                <text @tap="copyText" :data-text="order.store.re_name + '/' + order.store.re_mobile + '/' + order.store.re_address">复制</text>
		            </view>
		        </view>
		        <view style="height: 1rpx; background: #e2e2e2; margin: 20rpx 0"></view>
		        <view style="font-size: 10pt; color: #bbbbbb">· 未与卖家协商一致情况下，请勿寄到付或平邮</view>
		        <view style="height: 5rpx"></view>
		        <view style="font-size: 10pt; color: #bbbbbb; padding-bottom: 24rpx">· 请填写真实有效物流信息</view>
		    </view>
		    <form @submit="sendFormSubmit" :reportSubmit="true">
		        <block v-if="order.is_agree == 1 && (order.refund_type == 2 || order.refund_type == 3 ) ">
		            <view class="express-block" v-if="order.is_user_send == 0">
		                <view class="flex flex-row" style="border-bottom: 3rpx solid #eee">
		                    <view class="flex-grow-0 flex-y-center" style="margin-right: 32rpx">快递公司：</view>
		                    <view class="flex-grow-1">
		                        <picker
		                            @change="bindExpressPickerChange"
		                            name="express"
		                            :range="order.company"
		                            rangeKey="name"
		                            style="padding: 24rpx 0"
		                            :value="express_index"
		                        >
		                            <view class="flex flex-row">
		                                <view class="flex-grow-1">
		                                    <view v-if="express_index !== null">
		                                        {{ order.company[express_index].name }}
		                                    </view>
		                                    <view style="color: #888" v-else>请选择快递公司</view>
		                                </view>
		                                <view class="flex-grow-0">
		                                    <image src="/static/images/icon-jiantou-r.png" style="width: 12rpx; height: 22rpx"></image>
		                                </view>
		                            </view>
		                        </picker>
		                    </view>
		                </view>
		                <view class="flex flex-row">
		                    <view class="flex-grow-0 flex-y-center" style="margin-right: 32rpx">快递单号：</view>
		                    <view class="flex-grow-1">
		                        <input name="express_no" placeholder="请填写快递单号" style="padding: 24rpx 0; height: auto" />
		                    </view>
		                </view>
		            </view>
		            <view class="express-block" style="padding: 32rpx 24rpx" v-else>
		                <view class="flex flex-row" style="margin-bottom: 18rpx">
		                    <view class="flex-grow-0" style="margin-right: 32rpx">快递公司：</view>
		                    <view class="flex-grow-1">{{ order.log.deliveryCorpName }}</view>
		                </view>
		                <view class="flex flex-row">
		                    <view class="flex-grow-0" style="margin-right: 32rpx">快递单号：</view>
		                    <view class="flex-grow-1">{{ order.log.deliverySn }}</view>
		                </view>
		            </view>
		        </block>
		        <view class="flex-row bg-white mb-20 data-row" v-for="(goods,index) in order.goods">
		            <view class="flex-grow-0">
		                <image mode="aspectFill" :src="goods.product_image" style="width: 156rpx; height: 156rpx; margin-right: 20rpx"></image>
		            </view>
		            <view class="flex-grow-1 flex-col">
		                <view class="flex-grow-1 mb-20">{{ goods.product_title }}</view>
		                <view class="flex-grow-0 flex-row" style="font-size: 9pt">
		                    <view class="flex-grow-1">
		                        <view style="margin-right: 40rpx; display: inline-block" >
		                            {{  goods.product_sku_text ? goods.product_sku_text : '默认' }}
		                        </view>
		                    </view>
		                    <view class="flex-grow-0">×{{ goods.goods_num	 }}</view>
		                </view>
		            </view>
		        </view>
		        <view class="bg-white mb-20 data-row">
		            <view class="mb-20" v-if="order.aftersale.type == 1">售后类型：退款</view>
				    <view class="mb-20" v-if="order.aftersale.type == 2">售后类型：退货退款</view>
					<view class="mb-20" v-if="order.aftersale.type == 3">售后类型：换货</view>
				    <view class="mb-20" v-if="order.aftersale.type == 4">售后类型：仅退款</view>
		            <view class="mb-20">
		                退款金额：
		                <text style="color: #ff4544">￥{{ order.aftersale.refund_price }}</text>
		            </view>
		            <view class="mb-20">申请原因：{{ order.log.reason }}</view>
				  <view class="mb-20">申请说明：{{ order.log.content ? order.log.content : '无'}}</view>
		            <view class="pic-list mb-20">
		                <image
		                    @tap="viewImage"
		                    :data-index="index"
		                    mode="aspectFill"
		                    :src="item"
		                    style="width: 160rpx; height: 160rpx"
		                    v-for="(item, index) in order.log.images"
		                    :key="item.id"
		                ></image>
		            </view>
		        </view>
		        <view style="padding: 24rpx 24rpx 48rpx" v-if="order.is_agree == 1 && order.is_user_send == 0">
		            <button class="goods_send" formType="submit">确认发货</button>
		        </view>
		    </form>
		</view>
	</view>
</template>

<script>
	import {Order} from '../../../apirequest/order-model.js';
	var o = new Order();
	export default {
		data() {
			return {
				order_id:0,
				order_item_id:0,
				order:'',
				express_index:0
			}
		},
		
	onLoad(options) {
		this.order_id = options.id
		if(options.order_item_id){
			this.order_item_id = options.order_item_id
		}
		
		this._index()
	},
	methods: {
			_index(){
				var that = this;
				o.get_after_detail({id:this.order_id,order_item_id:this.order_item_id},(res) => {
					if(res.code == 1){
						that.order = res.data
						
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			copyText: function (e) {
				var t = e.currentTarget.dataset.text;
			   uni.setClipboardData({
					data: t,
					success: function () {
					  uni.showToast({
							title: '已复制'
						});
					}
				});
			},
			bindExpressPickerChange(e){
				this.express_index = e.detail.value
			},
			sendFormSubmit(e){
				var param = e.detail.value
				if(param.express == 0 || !param.express){
					uni.showToast({
						title: '请选择快递公司',
						icon:'none'
					});
					return false;
				}
				if(param.express_no == '' || !param.express_no){
					uni.showToast({
						title: '请输入快递单号',
						icon:'none'
					});
					return false;
				}
				param.order_id = this.order_id
				param.order_item_id = this.order_item_id;
				param.express = this.order.company[param.express].id
				o.after_express_add(param,(res) => {
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					if(res.code == 1){
						setTimeout(() => {
							uni.navigateBack({
								delta:1
							})
						},1000)
					}
				})
			},
		}
	}
</script>

<style>
.data-row {
    padding: 28rpx 24rpx;
    border-top: 1rpx solid #e3e3e3;
}

.pic-list {
    margin-left: -20rpx;
    margin-top: -20rpx;
}

.pic-list image {
    margin-left: 20rpx;
    margin-top: 20rpx;
}

.status-bar {
    position: relative;
    height: 140rpx;
    line-height: 140rpx;
    color: #fff;
    padding: 0 40rpx;
    margin-bottom: 20rpx;
}

.status-bar image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #fb715a;
}

.express-block {
    background: #fff;
    margin-bottom: 20rpx;
    border-bottom: 1rpx solid #e3e3e3;
    padding: 0 24rpx;
}

.copy-fz {
    border-radius: 50%;
    margin-right: 24rpx;
    color: #999999;
    width: 100rpx;
    height: 100rpx;
    border: 1rpx solid #e2e2e2;
    font-size: 10pt;
}

.address-info {
    justify-content: space-between;
    margin: 20rpx 40rpx 20rpx 0;
    color: #353535;
}

.goods_send {
    border: none;
    background: #ff4544;
    color: #fff;
    border-radius: 10rpx;
    height: 80rpx;
    line-height: 80rpx;
}
</style>
